<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box{
            border: 1px solid red;
            height: 20px;
            width: 200px;
        }
    </style>
</head>
<body>
    <input type="text" name="" id="inp">
    <div class="box"></div>
    <script>
        // 写一个输入框 - 输入里面的字符串
        // 对应下面的box内容也跟着改变

        // 添加输入事件
        var inp = document.querySelector('#inp');
        var box = document.querySelector('.box');
        // 当内容输入的时候
        inp.oninput = function(){
            // console.log('123');
            // 设置obj当中的inpVal属性
            obj.inpVal = this.value;
            // console.log(obj.inpVal);
        }

        // 不想直接操作dom，想用属性的方式去劫持改变数据
        var obj = Object.create({},{
            inpVal:{
                get:function(){
                    return this._val;
                },
                set:function(v){
                    // 设置box的innerText
                    box.innerText = v;

                    this._val = v;
                }
            }
        })






    </script>
</body>
</html>